<template>
	<div class="innerpage">
		<Header active="1"></Header>
		<div class="page_banner" :style="'background-image:url(' + cateInfo.image + ')'">
			<div class="page-inner">
				<h1 class="f60 font-b">{{ cateInfo.name }}</h1>
			</div>
		</div>
		<Tabs :tabsList="navList" />
		<div class="page-inner page-padding">
			<div class="products flex">
				<div class="col">
					<div class="filters">
						<div class="tit">
							<div class="t f20 font-m">關鍵字搜索</div>
						</div>
						<div class="fcon">
							<div class="line">
								<div class="prico"><i class="iconfont icon-sousuo"></i></div>
								<div class="in">
									<input type="text" v-model="tempPost.keyword" @keyup="Search" @input="handleInput"
										@blur="" placeholder="全文檢索" />
									<div class="select" v-if="selectShow">
										<div class="default" v-if="searchAllList.length == '0'">
											暂无数据
										</div>
										<div @click="tempPost.keyword=i,selectShow=false" class="item" v-for="(i, ind) in searchAllList" :key="ind">
											{{ i }}
										</div>
									</div>
								</div>
							</div>
							<div class="line">
								<div class="prico"><i class="iconfont icon-sousuo"></i></div>
								<div class="in">
									<input type="text" v-model="tempPost.product_name" @keyup="Search"
										@input="productNameInput" @blur="" placeholder="產品名稱" />
									<div class="select" v-if="nameSelectShow">
										<div class="default" v-if="searchNameList.length == '0'">
											暂无数据
										</div>
										<div @click="tempPost.product_name=i,nameSelectShow=false" class="item" v-for="(i, ind) in searchNameList" :key="ind">
											{{ i }}
										</div>
									</div>
								</div>
							</div>
							<div class="line">
								<div class="prico"><i class="iconfont icon-sousuo"></i></div>
								<div class="in">
									<input type="text" v-model="tempPost.active_ingredients" @keyup="Search"
										@input="ingredientsNameInput" @blur="" placeholder="活性成分" />
									<div class="select" v-if="ingredientsSelectShow">
										<div class="default" v-if="searchIngredientsList.length == '0'">
											暂无数据
										</div>
										<div @click="tempPost.active_ingredients=i,ingredientsSelectShow=false" class="item" v-for="(i, ind) in searchIngredientsList" :key="ind">
											{{ i }}
										</div>
									</div>
								</div>
							</div>
							<div class="btns">
								<div class="btn on" @click="handleFilter">檢索</div>
							</div>
						</div>
					</div>
					<div class="filters">
						<!-- <div class="tit flex">
							<div class="t f20 font-m">條件篩選</div>
							<div class="ico"><i class="iconfont icon-down2"></i></div>
						</div> -->
						<div class="selectgp">
							<div class="item">
								<div class="it flex">
									<div class="t f16">法律分類</div>
									<div class="ico"><i></i></div>
								</div>
								<div class="ops">
									<el-checkbox-group v-model="legal_classifical" @change="handleFilter">
										<template v-for="j in legalList">
											<el-tooltip :content="j" :visible="legaltipShow == j">
												<el-checkbox :label="j" :value="j" @mouseenter="mouseenter(j, 'legal')"
													@mouseleave="legaltipShow = ''" />
											</el-tooltip>
										</template>
									</el-checkbox-group>
								</div>
							</div>
							<div class="item">
								<div class="it flex">
									<div class="t f16">证书持有单位</div>
									<div class="ico"><i></i></div>
								</div>
								<div class="ops">
									<el-checkbox-group v-model="certificate_holder" @change="handleFilter">
										<template v-for="j in certList">
											<el-tooltip :content="j" :visible="certtipShow == j"><el-checkbox :label="j"
													:value="j" @mouseenter="mouseenter(j, 'cert')"
													@mouseleave="certtipShow = ''" /></el-tooltip>
										</template>
									</el-checkbox-group>
								</div>
							</div>
						</div>
					</div>
					<!-- <div class="filters">
						<div class="tit flex">
							<div class="t f20 font-m">我的筛选</div>
							<div class="ico"><i class="iconfont icon-down2"></i></div>
						</div>
						<div class="listSelected">
							<div class="i" v-for="i in myScreening">
								{{ i.name }}
							</div>
						</div>
					</div> -->
				</div>
				<div class="cor">
					<div class="filt flex" v-if="
              post.keyword ||
              post.product_name ||
              post.active_ingredients ||
              legal_classifical.length > 0 ||
              certificate_holder.length > 0
            ">
						<div class="li flex" v-if="post.keyword">
							<div class="lt">全文檢索</div>
							<div class="lp flex">
								<div class="d">
									<span>{{ post.keyword }}</span>
									<span class="c iconfont icon-close" @click="removeKeyword('keyword')"></span>
								</div>
							</div>
						</div>
						<div class="li flex" v-if="post.product_name">
							<div class="lt">產品名稱</div>
							<div class="lp flex">
								<div class="d">
									<span>{{ post.product_name }}</span>
									<span class="c iconfont icon-close" @click="removeKeyword('product_name')"></span>
								</div>
							</div>
						</div>
						<div class="li flex" v-if="post.active_ingredients">
							<div class="lt">活性成分</div>
							<div class="lp flex">
								<div class="d">
									<span>{{ post.active_ingredients }}</span>
									<span class="c iconfont icon-close"
										@click="removeKeyword('active_ingredients')"></span>
								</div>
							</div>
						</div>
						<div class="li flex" v-if="legal_classifical.length > 0">
							<div class="lt">法律分類</div>
							<div class="lp flex">
								<div class="d" v-for="(i, index) in legal_classifical" :key="i">
									<span>{{ i }}</span>
									<span class="c iconfont icon-close"
										@click="removeSelect('legal_classifical', index)"></span>
								</div>
							</div>
						</div>
						<div class="li flex" v-if="certificate_holder.length > 0">
							<div class="lt">证书持有单位</div>
							<div class="lp flex">
								<div class="d" v-for="(i, index) in certificate_holder" :key="i">
									<span>{{ i }}</span>
									<span class="c iconfont icon-close"
										@click="removeSelect('certificate_holder', index)"></span>
								</div>
							</div>
						</div>
					</div>
					<div class="page_res f16 font-m">
						<span>當前顯示</span><span
							class="n">{{ (page - 1) * 10 }}-{{ Math.min(page * 10, total) }}</span><span>，共</span><span
							class="n">{{ total }}</span><span>條結果</span>
					</div>
					<div class="table">
						<el-table :data="dataList" style="width: 100%">
							<el-table-column prop="reg_no" label="注册编号">
								<template #default="scope"><span class="t">{{ scope.row.reg_no }}</span></template>
							</el-table-column>
							<el-table-column prop="product_name" label="产品名称">
								<template #default="scope">{{
                  scope.row.product_name
                }}</template>
							</el-table-column>
							<el-table-column prop="" label="活性成分" width="200">
								<template #default="scope">
									<a class="btn" v-for="(item, index) in scope.row.ingredient_api_links"
										:href="`/cn/APIs?id=${item.id}`"><span
											v-if="index > 0">，</span>{{ item.ingredient }}</a>
								</template>
							</el-table-column>
							<el-table-column prop="legal_classification" label="法律分类">
								<template #default="scope"><span class="">{{
                    scope.row.legal_classification
                  }}</span></template>
							</el-table-column>
							<el-table-column prop="sale_requirement" label="销售要求">
								<template #default="scope">{{
                  scope.row.sale_requirement
                }}</template>
							</el-table-column>
							<el-table-column prop="certificate_holder" label="证书持有单位">
								<template #default="scope">{{
                  scope.row.certificate_holder
                }}</template>
							</el-table-column>
							<el-table-column prop="registration_date" label="注册日期" width="110">
								<template #default="scope">{{
                  scope.row.registration_date
                }}</template>
							</el-table-column>
							<el-table-column label="详情" width="80">
								<template #default="scope">
									<div class="btn" @click="showDetail(scope.row)">显示</div>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<!-- Pagination -->
					<Pagination :total="total" :count="3" :nobg="true" @change="pageChange" />
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		productsList,
		productsInfo,
		getCloumnList,
		legal_classifical,
		getCategoryList,
		certificate_holder,
		product_search_tips
	} from "@/api/sections";

	import {
		ElMessageBox
	} from "element-plus";
	export default {
		async setup() {
			const route = useRoute();
			const info = {
				banner: "/uploadfiles/databaseban.jpg",
				subs: [{
						id: "101",
						name: "Manufacturers",
						url: "/Manufacturers",
					},
					{
						id: "102",
						name: "Products",
						url: "/Products",
					},
					{
						id: "103",
						name: "Active Pharmaceutical Ingredient (API)",
						url: "/APIs",
					},
				],
				filterOptions: [{
						name: "Legal Classification",
						keyname: "legal_classification",
						options: [{
								name: "VICKMANS LABORA TORIES LID",
								value: 201,
							},
							{
								name: "darunavir ",
								value: 202,
							},
							{
								name: "itraconazole",
								value: 203,
							},
							{
								name: "darunavir ",
								value: 204,
							},
							{
								name: "itraconazole",
								value: 205,
							},
						],
					},
					{
						name: "Certificate Holder",
						keyname: "certificate_holder",
						options: [{
								value: 101,
								name: "Advance Pharm.Co., Ltd.",
							},
							{
								value: 102,
								name: "APT Pharma Ltd.",
							},
							{
								value: 103,
								name: "Bright Future Pharmaceutical  Laboratories Limited",
							},
							{
								value: 104,
								name: "Europharm Laboratories Co.,  Ltd.",
							},
							{
								value: 105,
								name: "Fortune Pharmacal Company  Limited",
							},
							{
								value: 106,
								name: "Jean-Marie Pharmacal Co., Ltd.",
							},
							{
								value: 107,
								name: "Karen Laboratories O/B Karen Pharmaceutical CO., Ltd.",
							},
							{
								value: 108,
								name: "Luxembourg Medicine Co. Ltd.",
							},
							{
								value: 109,
								name: "Marching Pharmaceutical  Limited ",
							},
						],
					},
				],
			};
			let obj = {};
			info.filterOptions.forEach((i) => {
				obj[i.keyname] = [];
				const qr = route.query[i.keyname];
				if (qr) {
					obj[i.keyname].push(Number(qr));
				}
			});
			return {
				info,
				defaultCheck: obj,
			};
		},
		data() {
			return {
				keyword1: "",
				keyword2: "",
				keyword3: "",
				filterName: "",
				cateInfo: {},
				checkResult: this.defaultCheck,
				dataList: [],
				navList: [],
				legalList: [],
				certList: [],
				certificate_holder: [],
				legal_classifical: [],
				post: {},
				tempPost: {},
				total: 0,
				page: 1,
				searchAllList: [],
				searchNameList: [],
				searchIngredientsList: [],
				selectShow: false,
				nameSelectShow: false,
				ingredientsSelectShow: false,
				legaltipShow: "",
				certtipShow: "",
			};
		},
		methods: {
			addFilters() {
				console.log(this.filterName, this.post);
			},
			pageChange(e) {
				this.page = e;
				this.getData();
			},
			init() {
				getCloumnList({
					id: 1420,
				}).then((res) => {
					this.navList = res.data;
				});

				legal_classifical({}).then((res) => {
					this.legalList = res.data;
				});
				certificate_holder({}).then((res) => {
					this.certList = res.data;
					if (this.$route.query.certificate_holder) {
						this.certificate_holder.push(this.$route.query.certificate_holder);
					}

					this.initData();
				});
			},
			initData() {
				this.page = 1;
				this.dataList = [];
				this.total = 0;
				this.getData();
			},
			getData() {
				let post = {
					page: this.page,
					limit: 10,
					...this.post,
				};
				if (this.legal_classifical.length > 0) {
					post.legal_classifical = String(this.legal_classifical);
				}
				if (this.certificate_holder.length > 0) {
					post.certificate_holder = String(this.certificate_holder);
				}
				if (this.$route.query.id) {
					post.id = this.$route.query.id;
				}

				productsList(post).then((res) => {
					console.log(res, 1111);
					this.dataList = res.data.data;

					this.total = res.data.totalcount;
				});
			},
			Search: function(e) {
				const that = this;
				if (e.keyCode && e.keyCode == 13) {
					that.handleFilter();
				}
			},
			removeKeyword(key) {
				var that = this;
				that.post[key] = "";
				that.tempPost[key] = "";
				that.handleFilter();
			},
			removeSelect(key, index) {
				this[key].splice(index, 1);
				this.handleFilter();
			},
			handleFilter: function() {
				const that = this;
				var obj = {
					...JSON.parse(JSON.stringify(that.post)),
					...JSON.parse(JSON.stringify(that.tempPost)),
				};
				that.post = obj;
				that.initData();
			},
			showDetail: function(obj) {
				console.log(obj);

				let allRoute = "";
				if (obj.ingredient_api_links && obj.ingredient_api_links.length > 0) {
					obj.ingredient_api_links.some((item) => {
						allRoute += `<a href="/cn/APIs?id=${item.id}">${item.ingredient}</a>，`;
					});
				}
				ElMessageBox.alert(
					`<div class="prodetail">
                    <div class="li flex"><div class="ll">產品ID:</div><div class="lr">${
                      obj.id
                    }</div></div>
                    <div class="li flex"><div class="ll">註冊號:</div> <div class="lr">${
                      obj.reg_no
                    }</div></div>
                    <div class="li flex"><div class="ll">產品名稱:</div> <div class="lr">${
                      obj.product_name
                    }</div></div>
                    <div class="li flex"><div class="ll">活性成分:</div> <div class="lr">${allRoute}</div></div>
                    <div class="li flex"><div class="ll">法律分类</div> <div class="lr">${
                      obj.legal_classification
                    }</div></div>
                    <div class="li flex"><div class="ll">销售要求:</div> <div class="lr">${
                      obj.sale_requirement
                    }</div></div>
                    <div class="li flex"><div class="ll">证书持有单位:</div> <div class="lr">${
                      obj.certificate_holder
                    }</div></div>
                    <div class="li flex"><div class="ll">持有人地址:</div> <div class="lr">${
                      obj.holders_address || ""
                    }</div></div>
                    <div class="li flex"><div class="ll">注册日期:</div> <div class="lr">${
                      obj.registration_date || ""
                    }</div></div>
                    <div class="li flex"><div class="ll">更新日期:</div> <div class="lr">${
                      obj.updated_at
                    }</div></div>
                    <div class="li flex"><div class="ll">來源:</div> <div class="lr">${
                      obj.source || ""
                    }</div></div>
                    <div class="li flex"><div class="ll">DP2ID:</div> <div class="lr">${
                      obj.dp2id || ""
                    }</div></div>
                </div>`, {
						title: obj.product_name,
						dangerouslyUseHTMLString: true,
						showConfirmButton: false,
						customClass: "ipop",
					}
				);
			},
			handleInput(e) {
				if (this.tempPost.keyword) {


					product_search_tips({
						keyword: this.tempPost.keyword,
						search:'keyword',
						maxcount: 20
					}).then((res) => {
						this.searchAllList = res.data
						this.selectShow = true;
					});
				} else {
					this.selectShow = false;
				}
				console.log(e.target.value);
			},
			inputBlurred() {
				this.selectShow = false;
			},
			productNameInput(e) {
				if (this.tempPost.product_name) {
					
					
					product_search_tips({
						keyword: this.tempPost.product_name,
						search:'product_name',
						maxcount: 20
					}).then((res) => {
						this.searchNameList = res.data
						this.nameSelectShow = true;
					});
				} else {
					this.nameSelectShow = false;
				}
				console.log(e.target.value);
			},
			ProductBlurred() {
				this.nameSelectShow = false;
			},
			ingredientsNameInput(e) {
				if (this.tempPost.active_ingredients) {
					
					product_search_tips({
						keyword: this.tempPost.active_ingredients,
						search:'ingredients',
						maxcount: 20
					}).then((res) => {
						this.searchIngredientsList = res.data
						this.ingredientsSelectShow = true;
					});
				} else {
					this.ingredientsSelectShow = false;
				}
				console.log(e.target.value);
			},
			ActiveBlurred() {
				this.ingredientsSelectShow = false;
			},
			mouseenter(name, type) {
				if (type == "legal") {
					if (name.length >= 36) {
						this.legaltipShow = name;
					}
				} else {
					if (name.length >= 30) {
						this.certtipShow = name;
					}
				}
			},
		},
		computed: {
			myScreening: function() {
				var that = this;
				let res = [];
				let values = JSON.parse(JSON.stringify(that.checkResult));
				let options = JSON.parse(JSON.stringify(that.info.filterOptions));
				Object.keys(values).forEach(function(key) {
					values[key].forEach((val) => {
						let opt = options.filter((i) => {
							return i.keyname == key;
						});
						console.log(opt);
						opt[0].options.forEach((j) => {
							if (j.value == val) {
								res.push(j);
							}
						});
					});
				});
				return res;
			},
		},
		mounted: function() {
			var that = this;
			that.init();

			getCategoryList({
				cid: 1420
			}).then((res) => {
				that.cateInfo = res.data;
			});
			that.$nextTick(function() {
				$(".selectgp .item .it").click(function() {
					$(this).find(".ico").toggleClass("act");
					$(this).parents(".item").find(".ops").slideToggle();
				});

				$(".filters .tit").click(function() {
					$(this).find(".ico").toggleClass("act");
					$(this).siblings().slideToggle();
				});

				$(".selectgp .item .it").eq(1).find(".ico").addClass("act");
				$(".selectgp .item .it").eq(1).parents(".item").find(".ops").slideDown();
			});
		},
	};
</script>